<script setup>
	import {
		reactive
	} from 'vue'
	import {
		jumpTo
	} from '@/utils/common'
	import http from '@/api/loginAPI'
	import http1 from '@/api/userAPI'

	import {
		useStore
	} from "@/stores/index"

	const data = reactive({
		show: false,
		loginList: [{
			name: '手机号'
		}, {
			name: '用户名'
		}],
		current: 0,
		content: '',
		phone: '',
		code: '',
		lock: 0,
		isDisabled: false,
		codeText: '发送',
		codePlaceholder: '验证码Verification Code'
	})

	// 发送验证码
	async function onSend(second = 60) {
		if (data.phone == "") {

			uni.showToast({
				title: '请输入手机号',
				icon: 'none',
				duration: 2000
			});
			return false;
		}
		const res = await http.code(data.phone)
		uni.showToast({
			title: res.msg,
			icon: 'none',
			success: () => {
				data.isDisabled = true;
				data.codeText = second + 's'
				const timer = setInterval(() => {
					data.codeText = --second + 's'
					if (second < 0) {
						data.isDisabled = false;
						data.codeText = '发送'
						clearInterval(timer)
					}
				}, 1000)
			},
		})
	}

	function onKeyInput(event) {
		//测试账号
		var value = event.target.value;
		if (value === '15522579917') {
			data.lock = 1;
			data.codePlaceholder = "密码Password";
		} else {
			data.lock = 0;
			data.codePlaceholder = '验证码Verification Code';
		}
	}

	// 登录
	async function login() {
		const res = await http.login(data.code, data.phone, data.lock)
		uni.setStorageSync('token', res.data)
		const userStore = useStore()
		//登陆后先清除用户缓存
		userStore.user.clear()

		uni.showToast({
			title: res.msg,
			icon: 'none',
			success: () => {
				setTimeout(async () => {
					await userStore.user.getUserinfo();

					if (userStore.user.userInfo.is_vip == 0 || userStore.user.userInfo
						.is_set == 0) {
						jumpTo('/pages/login/code')
					} else {
						jumpTo("/pages/index/index")
					}

				}, 800)
			},
		})
	}
</script>

<template>
	<view style="height: 22.8%" />
	<text class="logo">IVMCR</text>
	<text class="title"> 个体专属定制室Individual exclusive customization room </text>

<!-- 	<view style="width: 443rpx; margin: 0 auto 40rpx;">
		<u-subsection :list="data.loginList" v-model="data.current" :animation="true" mode="subsection"></u-subsection>
	</view> -->

<!-- 	<view style="width: 443rpx; margin: 0 auto;text-align: center;" v-if="data.current==0">
		<input class="input phone" focus v-model="data.phone" @input="onKeyInput" placeholder="手机号cell-phone number" />
		<view class="code-box">
			<input class="input code" v-model="data.code" :placeholder="data.codePlaceholder" />
			<button class="btn" v-if="data.lock==0" :disabled="data.isDisabled"
				:class="{ isActive: data.codeText !== '发送' }" hover-class="is-hover" @click="onSend()">
				{{ data.codeText }}
			</button>
		</view>
	</view> -->
	<view style="width: 443rpx; margin: 0 auto;text-align: center;">
		<input class="input phone" focus v-model="data.phone" placeholder="用户名user name" />
		<view class="code-box">
			<input class="input phone" v-model="data.code" placeholder="请输入登录密码" />
		</view>
	</view>
	<view class="login" @click="login">
		<text>登录</text>
		<image src="@/static/icon/btn-down.png" mode="aspectFit" />
	</view>

	<u-modal title="公告" :show="data.show" closeOnClickOverlay :showCancelButton="true" @confirm="login"
		@cancel="data.show = false">
		<scroll-view style="font-size: 29rpx;color: #333;height: 800rpx;" scroll-y>
			<rich-text class="rule-content" :nodes="data.content"></rich-text>
		</scroll-view>
	</u-modal>


</template>

<style lang="scss" scoped>
	.logo {
		display: block;
		color: rgb(0, 0, 0);
		font-size: 30rpx;
		font-weight: 600;
		line-height: 42rpx;
		letter-spacing: 10rpx;
		text-align: center;
	}

	.title {
		margin-top: 21rpx;
		margin-bottom: 135rpx;
		align-self: center;
		width: 242rpx;
		color: rgb(0, 0, 0);
		font-size: 15rpx;
		font-weight: 500;
		line-height: 19rpx;
		text-align: center;
	}

	.input {
		align-self: center;
		height: 61rpx;
		box-sizing: border-box;
		border: 0.5rpx solid rgb(225, 225, 225);
		border-radius: 11rpx;
		background: rgb(242, 242, 242);
		// color: rgb(180, 180, 180);
		font-family: PingFang;
		font-size: 20rpx;
		font-weight: 500;
		line-height: 19rpx;
		text-align: center;
	}

	:deep(.input-placeholder) {
		font-family: PingFang;
		color: rgb(180, 180, 180);
		font-size: 20rpx;
		font-weight: 500;
		line-height: 19rpx;
		text-align: center;
	}

	.is-hover {
		background: #333;
	}

	.phone,
	.code-box {
		width: 443rpx;
	}

	.code-box {
		margin-top: 34rpx;
		align-self: center;
		display: flex;
		justify-content: space-between;

		.code {
			width: 296rpx;
		}

		.btn {
			margin: 0;
			width: 118rpx;
			height: 61rpx;
			border-radius: 11rpx;
			background: rgb(182, 182, 182);
			color: rgb(255, 255, 255);
			font-family: PingFang;
			font-size: 24rpx;
			font-weight: 500;
			line-height: 61rpx;
			text-align: center;

			&.isActive {
				pointer-events: none;
			}
		}
	}

	.login {
		position: relative;
		align-self: center;
		margin-top: 245rpx;
		width: 190rpx;
		height: 54rpx;
		filter: drop-shadow(0px 2rpx 1rpx rgba(0, 0, 0, 0.2));

		>image {
			width: 100%;
			height: 100%;
		}

		>text {
			position: absolute;
			width: 100%;
			color: rgb(165, 165, 165);
			font-size: 22rpx;
			font-weight: 500;
			line-height: 54rpx;
			text-align: center;
			z-index: 1;
		}
	}
</style>